import router from './router'
import store from '@/store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { asyncRoutes } from '@/router/index'
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // 进度条最右侧不出现加载小圆圈

const whiteList = ['/login', '/404'] // 数组

router.beforeEach(async (to, from, next) => {
  // 开启进度条
  NProgress.start()
  const token = store.getters.token
  if (token) {
    if (to.path === '/login') {
      next('/') // 中断本来要跳转到登录页面的导航，强制跳转到'/',会让浏览器地址栏的路由改变，
      // 重新去匹配路由规则数组，匹配后再次重新执行路由守卫（直到走了next()才放行跳转页面）
      NProgress.done()
    } else {
      next()
      if (!store.getters.name) {
        const res = await store.dispatch('user/getUserInfoActions')
        // 1. 准备俩份数据 一份动态路由表[前端本地存放] + 个人信息接口提供
        console.log(asyncRoutes)
        console.log(res.data.roles.menus)
        const menus = res.data.roles.menus
        // 2. 以menus为主对asyncRoutes做过滤 过滤filter + 条件：判断当前route下面的chilren[0].name能不能在menus找到
        const filterRoutes = asyncRoutes.filter(route => menus.includes(route.children[0].name))
        console.log(filterRoutes)
        // 3. 调用一个addRoues的方法 把筛选之后的动态路由表加入到路由系统中 让路由可用
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 4. 调用store中mutation函数 完成左侧路由的拼接
        store.commit('menu/setMenus', filterRoutes)
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
  // next()
})

// 全局后置守卫
// 路由跳转完成后, 会执行一次这里回调函数
router.afterEach((to, from) => {
  document.title = getPageTitle(to.meta.title)
  // 路由跳转页面后, 关闭进度条
  NProgress.done()
})
